{% extends "blogs/base.html" %}
{% load bootstrap3 %}

{% block javascript %}
	<link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
    integrity=
    "sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" 
    crossorigin="anonymous"
  >
  <script 
    defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" 
    integrity=
    "sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" 
    crossorigin="anonymous"
  ></script>
  <script 
    defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" 
    integrity=
    "sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" 
    crossorigin="anonymous"
  ></script>
  <script>
	window.onload = function(){
		renderMathInElement(document.getElementById("md-body"))
	}
  </script>
{% endblock javascript %}

{% block header %}
	<h2>
		{% if userobj == user %}
			<a href="{% url 'users:upload_avatar' %}"><img src="{{ header }}" width=64 height=64 class="img-rounded"></img></a>{{ userobj }}
		{% else %}
			<img src="{{ header }}" width=64 height=64 class="img-rounded"></img>{{ userobj }}
		{% endif %}
	</h2>
	
{% endblock header %}

{% block content %}
	{% if user == userobj %}
		<form action="{% url 'users:edit_home' %}" method="post" class="form">
			{% csrf_token %}
			{{ form.media }}
			{{ form.as_p }}
				
			 <p><input type="submit" value="更改" class="btn btn-primary"></p>
		</form>
	{% else %}
		<div class="panel panel-default">
			<div class="panel-heading">
				个人简介
			</div>
			<div class="panel-body">
				{% if success %}
					<div class="alert alert-success">
						个人简介修改成功！
					</div>
				{% endif %}
				<div>
					{{ homeMD|safe }}
				</div>
			</div>
		</div>
	{% endif %}
	<div class="panel panel-default">
		<div class="panel-heading">留言区</div>
			<div class="panel-body">
				{% for comment in comments %}
					<div class="panel panel-default">
						<div class="panel-heading">
							<a href="{% url 'users:homePage' comment.Owner.id %}">
								{% if comment.Owner == user %}
									{{ comment.Owner }}（我）
								{% else %}
									{{ comment.Owner }}
								{% endif %}
							</a>
							{{ comment.date_added }}
							{% if userobj == user or user.is_superuser or comment.Owner == user %}
								<a href="{% url 'users:delete_comment' comment.id %}">删除</a>
							{% endif %}
						</div>
						<div class="panel-body">
							{{ comment|linebreaks }}
						</div>
					</div>
				{% empty %}
					<div class="alert alert-info">
						还没有留言噢，快来抢沙发吧！
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
	<form action="{% url 'users:comment' userobj.id %}" method='post' class="form">
		{% csrf_token %}
		{% bootstrap_form commentForm %}
		
		{% buttons %}
			<button name="submit" class="btn btn-primary">提交</button>
		{% endbuttons %}
	</form>
{% endblock content %}
